<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{width:400px;position: relative;height:120px;margin: 0 auto;overflow: hidden;}
        .banner .imgbox{width:2000px;position: absolute;left:0;}
        .banner .imgbox img{width:400px;height:120px;float: left;}
        .banner .btns input{position: absolute;width:30px;height:30px;top:45px;}
        .banner .btns #left{left:0}
        .banner .btns #right{right:0}
    </style>
</head>
<body>
    <div class="banner">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" name="" id="left" value="<">
            <input type="button" name="" id="right" value=">">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>

    // 面向对象分析：点击按钮图片顺序切换
        // 选择元素
        // 绑定事件
            // 计算索引：左--，右++
            // 根据索引计算图片容器的left
            // 将left通过动画效果设置给容器

    // 面向对象设计
        // function Banner(){
        //     // 选择元素
        //     // 执行绑定事件
        //     this.addEvent();
        // }
        // Banner.prototype.addEvent = function(){
        //     // 绑定事件
        //         // 执行计算索引
        //         this.changeIndex();
        // }
        // Banner.prototype.changeIndex = function(){
        //     // 计算索引
        //     // 执行根据索引设置容器位置
        //     this.changeImg();
        // }
        // Banner.prototype.changeImg = function(){
        //     // 根据索引设置容器位置
        // }
        // new Banner();

    // 面向对象编程
    function Banner(){
        // 选择元素
        this.left = document.querySelector("#left");
        this.right = document.querySelector("#right");
        this.imgbox = document.querySelector(".imgbox");
        this.imgs = document.querySelectorAll(".imgbox img");

        // 设置默认索引
        this.index = 0;

        // 执行绑定事件
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        // 绑定事件
        this.right.onclick = function(){
            // 执行计算索引
            that.changeIndex();
        }
    }
    Banner.prototype.changeIndex = function(){
        // 计算索引
        if(this.index === this.imgs.length-1){
            this.index = this.imgs.length-1;
        }else{
            this.index++;
        }
        // 执行根据索引设置容器位置
        this.changeImg();
    }
    Banner.prototype.changeImg = function(){
        // 根据索引设置容器位置
        // 直接设置
        // this.imgbox.style.left = -this.index * this.imgs[0].offsetWidth + "px";
        // 通过动画设置
        move(this.imgbox, {
            left: -this.index * this.imgs[0].offsetWidth
        })
    }

    // 启动
    new Banner();
    
    // 设置默认索引
    // 选择元素
        // 绑定事件
            // 计算索引：左--，右++
            // 根据索引计算图片容器的left
            // 将left通过动画效果设置给容器

    
</script>
</html>